<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--内部方式-->
		<script>
			/*触发一个获取焦点事件*/
			function getUser(){
				//获取id="username"的input标签对象
			var username = document.getElementById("username") ;
			//设置input标签对象的value属性
			username.value="" ;
		}
			
			function checkUsername(){
				//获取用户名的内容
				var username = document.getElementById("username").value ;
				//假设：用户名不是“eric”，提示当前用户名可以用，否则被占用
				//获取span标签对象
				var span = document.getElementById("user_tip") ;
				//设置span标签对象的innerHTML属性：输出文本内容
				if(username!="eric"){
					//提示
					span.innerHTML="当前用户名可用".fontcolor("greenyellow") ;
				}else{
					span.innerHTML="用户名被占用".fontcolor("red") ;
				}
				
			}
		</script>
	</head>
<body>

	<!--
		input：value属性：给input提供默认值 （js原生）
		      ploaceholder: h5提供属性，当鼠标点进文本框时，文本框里的提示文字消失
		      		也可以用获取焦点事件得到同样的效果
	-->
	<!--onfocus:获取焦点事件
		onblur:失去焦点
	-->
用户名：<input type="text" name="username" onblur="checkUsername()" id="username" value="请输入用户名" onfocus="getUser()" />
<span id="user_tip"></span>
</body>
</html>
